const tbody = document.querySelector("tbody");
//页面渲染
function getStudenList() {
  axios.get('/student/list')
    .then(res => {
      //拼接字符串
      const trHTML = res.data.data.reduce((h, v) => {
        return h += `
                <tr>
                 <th scope="row">${v.id}</th>
                 <td>${v.name}</td>
                 <td>${v.sex}</td>
                 <td>${v.age}</td>
                 <td>${v.group}</td>
                 <td>${v.phone}</td>
                 <td>${v.salary}</td>
                 <td>${v.truesalary}</td>
                 <td>${v.province}${v.city}${v.county}</td>
                 <td>
                   <button type="button" class="btn update btn-primary btn-sm" data-id=${v.id}>修改</button>
                   <button type="button" class="btn del btn-danger btn-sm" data-id=${v.id}>删除</button>
                 </td>
               </tr> 
                  `
      }, "");
      $("tbody").html(trHTML)
    })
}
//省市县联动1.0封装
//渲染省
//     function SSX(url,typename,type,pname,cname){
//       axios.get(url,{params:{pname,cname}})
//     .then(res => {
//       console.log(res)
//         if(res.status===200){
//           const optionHTML=res.data.reduce((h,v)=>{
//             return h+=`
//             <option value="${v}">${v}</option>
//             `
//       },`<option selected value="">--${typename}--</option>`)
//       $(`.add-form select[name=${type}]`).html(optionHTML);
//         }
//     });
//     }
//     SSX('/geo/province',"省","province");
// //让省联动市
// $(".add-form select[name=province]").change(function(){
//   $(".add-form select[name=county] option")[0].selected=true;
//   const vName=$(".add-form select[name=province]")[0].value;
//   SSX('/geo/city',"市","city",vName);
// }) 
// //让市联动县
// $(".add-form select[name=city]").change(function(){
//   const vName=$(".add-form select[name=province]")[0].value;
//   const xName=$(".add-form select[name=city]")[0].value;
//   SSX('/geo/county',"县","county",vName,xName);
// }) 

//省市联动2.0封装函数
// 发送请求获取数据 显示到对应的 下拉列表中
// url 接口地址
// params 接口的参数
// dom 目标下列表
// label 下拉列表默认显示的文本
function renderSelect(url, params, dom, label, value = "") {
  axios.get(url, { params }).then((result) => {
    dom.innerHTML = result.data.reduce(
      (h, v) => h + `<option value="${v}">${v}</option>`,
      `<option value="">--${label}--</option>`
    );
    dom.value = value;
  });
}

// 初始化 新增表单 中 下拉列表
function initSelect(selector, form) {
  // 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
  // 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
  // 让后端去调整  返回的数据结构 必须一致！！！！
  const provinceSelect = $(`${selector} [name=province]`)[0]; // 新增表单中  省 下拉列表
  const citySelect = $(`${selector} [name=city]`)[0]; // 新增表单中  市 下拉列表
  const countySelect = $(`${selector} [name=county]`)[0]; // 新增表单中  县 下拉列表

  // 获取省份数据 显示出来
  renderSelect('/geo/province', {}, provinceSelect, '省');

  // 新增中  省  change事件
  provinceSelect.addEventListener('change', function () {
    // 根据省来获取市
    renderSelect(
      '/geo/city',
      { pname: provinceSelect.value },
      citySelect,
      '市'
    );
    //然县的value改变
    $(`${form} select[name=county] option`)[0].selected = true;
  });

  // 新增中 市  change事件
  citySelect.addEventListener('change', function () {
    renderSelect(
      '/geo/county',
      { pname: provinceSelect.value, cname: citySelect.value },
      countySelect,
      '县'
    );
  });
}

initSelect("#addModal", ".add-form");
initSelect("#updateModal", ".update-form");
//学生添加功能
//  确认添加按钮
$(".add-form").submit(function (e) {
  e.preventDefault();
  const data = $(".add-form").serialize();
  axios.post('/student/add', data)
    .then(res => {
      if (res.status === 200) {
        toastr.success(res.data.message);
        $("#addModal").modal("hide");
        getStudenList();
      }
    })
})
//学生删除功能
tbody.addEventListener("click", function (e) {
  if (e.target.classList.contains("del")) {
    const flag = confirm("你是否要删除");
    if (flag) {
      const id = e.target.dataset.id;
      axios.delete("/student/delete",
        {
          params: { id },
          // headers: { 'Authorization': localStorage.getItem("liuxinKey") }, 
        }
      ).then(result => {
        if (result.data.code === 0) {
          toastr.success(result.data.message);
        }
      })
    }
    getStudenList();
  }
  //学生修改功能
  if (e.target.classList.contains("update")) {
    $("#updateModal").modal("show");
    const id = e.target.dataset.id;
    axios.get('/student/one', {
      params: { id },
      // headers: { 'Authorization': localStorage.getItem("liuxinKey") }, 
    })
      .then(res => {
        for (const key in res.data.data) {
          const target = document.querySelector(`.update-form [name=${key}]`);
          if (key === "sex") {
            document.querySelector(`.update-form [name=${key}][value=${res.data.data[key]}]`).checked = true;
            continue;
          }
          if (target) {
            target.value = res.data.data[key];
          }
        }

        //获取市
        //我们先要根据省把市渲染出来
        renderSelect(
          '/geo/city',
          { pname: res.data.data.province },
          document.querySelector(".update-form [name=city]"),
          '市',
          res.data.data.city,
        );
        //我们现在来拿县
        renderSelect(
          '/geo/county',
          { pname: res.data.data.province, cname: res.data.data.city },
          document.querySelector(".update-form [name=county]"),
          '县',
          res.data.data.county,
        )
      })
  }
})
//点击提交修改
$(".update-form").submit(function (e) {
  e.preventDefault();
  const data = $(".update-form").serialize();
  axios.put('/student/update', data)
    .then(res => {
      if (res.status === 200) {
        toastr.success(res.data.message);
        $("#updateModal").modal("hide");
        getStudenList();
      }
    })
})
getStudenList();